<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蔡艺婷</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/concat01.css">
</head>
<body>
    <header>
        <div class="container">
        
            <div class="logo">
                
                <img src="img/logo_white.png" alt="">
            </div>
            <label for="menucheck" class="menu-icon">
                <em></em>
                <em></em>
                <em></em>
            </label>
            <input type="checkbox" id="menucheck">
            <ul>
                <li><a href="index01.html" taget="_self">首页</a></li>
                <li><a href="case01.html" taget="_self">最新案例</a></li>
                <li><a href="about01.html" taget="_self">关于我们</a></li>
                <li class="actived"><a href="concat01.html" taget="_self">联系我们</a></li>
            </ul>
            <div class="clear"></div>
            
        </div>
    </header>
    <!-- <div id="header"></div> -->
    <div class="banner">
        <div class="main-text">
            <h1>
                独具匠心 专注品质
            </h1>
            <span>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, cumque obcaecati? Ad molestias, iusto, explicabo quasi est placeat tempore atque architecto fuga adipisci qui vel natus quod dicta provident dolorum.
            </span>
        </div>
    </div>


    <div class="container lists">
        <div class="title">
            联系我们
        </div>
        <div class="main-box">
            <form action="#" method="get">
                <input type="text" name="name" placeholder="姓名">
                <input type="text" name="phone" placeholder="手机">
                <input type="text" name="email" placeholder="邮箱">
                <textarea name="content" placeholder="留言内容"></textarea>

                <div>
                    <button type="submit">提交</button>
                    <button type="reset">重置</button>
                </div>
            </form>

            <div class="map">

            </div>

            <div class="clear"></div>
        </div>
    </div>

<div class="contact">
    <div class="container">
        <div class="title">联系我们</div>
        <!-- qrcode:二维码 -->
        <div class="qrcode">
            <img src="img/qrcode.jpg" alt="公众号二维码" width="120">
            <div class="center">
                关注公众号
            </div>
        </div>
        <div class="qrcode">
            <img src="img/qrcode.jpg" alt="公众号二维码" width="120">
            <div class="center">
                下载APP
            </div>
        </div>
        <div class="info-box">
            <div class="line">
                <span class="line-title">
                    QQ:
                </span>
                <span>
                    2222XXXX22
                </span>
            </div>
            <div class="line">
                <span class="line-title">
                    邮箱:
                </span>
                <span>
                    XXXX@qq.com
                </span>
            </div>
            <div class="line">
                <span class="line-title">
                    微博:
                </span>
                <span>
                    XXXX
                </span>
            </div>
            <div class="line">
                <span class="line-title">
                    地址:
                </span>
                <span>
                    山东省青岛市xx区xx路2号
                </span>
            </div>
        </div>
        <div class="phone">
            <i class="fas fa-phone-volume fa-3x">
            </i>
            <span>
                0591-88XXXX888
                <!-- span不能修改宽高 -->
            </span>
        </div>
        <div class="clear"></div>
    </div>
    <!-- 页脚:用于定义文章的页脚 -->
</div>

    <footer class="center">
        Copyright &copy; 2024 XXXXXXXX公司版权所有
    </footer>
</body>
</html>